<template>
	<view class="container">
		<block v-if="detail!=''">
			<view class="top">
				<view class="title">
					<view class="left">
						<view class="status">{{detail.status_text}}</view>
						<view class="date">认养时间：{{detail.ry_time}}</view>
					</view>
					<view class="right">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/order/jiasu.png"
							mode="widthFix"></image>
						<text>加速值：{{detail.speed}}</text>
					</view>
				</view>
				<view class="good">
					<image :src="detail.goods_img" mode="widthFix" class="goods-img"></image>
					<view class="right">
						<view class="left">
							<view class="name">{{detail.goods_name}}</view>
							<view class="desc">{{detail.store.store_name}}</view>
						</view>
						<view class="right-num">x{{detail.goods_num}}{{detail.unit}}</view>
					</view>
				</view>
			</view>
			<view class="order">
				<view class="left">订单号:{{detail.order_sn}}</view>
				<button size="mini" class="right-btn" @click="goXieyi(0,detail.order_id)">查看协议</button>
			</view>
			<view class="zhouqi">
				<view class="title">
					<view class="left">认养周期</view>
					<view class="right">
						<text class="day">{{detail.sy_day}}</text>
						<text>天</text>
					</view>
				</view>
				<view class="zhouqi-items-container">
					<view class="zhouqi-items">
						<view class="zhouqi-item">
							<view class="tit">订单价格</view>
							<view class="desc">{{detail.order_amount}}元</view>
						</view>
						<view class="zhouqi-item">
							<view class="tit">总产重</view>
							<view class="desc">{{detail.yield}}斤</view>
						</view>
						<view class="zhouqi-item">
							<view class="tit">每日收益</view>
							<view class="desc">{{(detail.day_sy*detail.goods_num+detail.speed).toFixed(3)}}两</view>
						</view>
					</view>
					<view class="zhouqi-items">
						<view class="zhouqi-item">
							<view class="tit">累计收益</view>
							<view class="desc">{{detail.yet_sy}}两</view>
						</view>
						<view class="zhouqi-item">
							<view class="tit">剩余收益</view>
							<view class="desc">{{detail.surplus_yield}}两</view>
						</view>
						<view class="zhouqi-item">
							<view class="tit">剩余周期</view>
							<view class="desc">{{detail.surplus_day_text}}</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 130rpx;" v-if="detail.order_status==-1"></view>
			<view style="height: 20rpx;" v-else></view>
			<view class="order-detail-bot" v-if="detail.order_status==-1">
				<view class="left"></view>
				<view class="order-detail-bot-right">
					<button type="default" @click="cancel()">取消订单</button>
					<button type="default" class="theme" @click="payment()" :disabled="zfDisabled">立即支付</button>
				</view>
			</view>
		</block>
		<u-popup :safeAreaInsetBottom="false" :safeAreaInsetTop="false" mode="center" :show="cancel_show" round="10"
			:overlay="true" :customStyle="customStyle1" @close="cancel_show=false">
			<view class="u-popup-slot">
				<text class="u-popup-slot_text">确认取消？</text>
				<view class="u-popup-slot_flex">
					<button @click="cancel_show = !cancel_show" class="cancel">取消</button>
					<button @click="CancleOrder()" class="confirm">确认</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				customStyle1: {
					'width': '80%'
				},
				cancel_show: false,
				temp_index: -1,
				detail: '',
				id: 0,
				zfDisabled: false
			};
		},
		methods: {
			//跳转到协议详情页面
			to_xieyi() {
				this.$u.route({
					url: '/pages/index/html-detail',
					params: {
						title: '认养协议',
						url: encodeURIComponent('/api/xieyi_xq?id=2')
					}
				})
			},
			//获取订单详情数据
			async get_detail() {
				const params = {
					order_id: this.id
				}
				const data = await _this.$post('api/ry_dd_xq', params)
				if (data.code == 200) {
					this.detail = data.data.order
				} else if (data.code == 100) {
					uni.$u.toast(data.msg)
					setTimeout(() => {
						uni.navigateBack({})
					}, 2000)
				} else {
					uni.$u.toast(data.msg)
				}
			},
			// 支付
			async payment() {
				_this.zfDisabled = true
				setTimeout(() => {
					_this.zfDisabled = false
				}, 2000)
				let form = {
					order_id: _this.id,
					is_zhifu: 1,
				}
				const data = await _this.$post('api/ry_dd_xq', form)
				if (data.code == 50) {
					//唤起支付 wxpay alipay
					uni.requestPayment({
						provider: data.data.pay_code,
						orderInfo: data.data.result,
						success(res) {
							_this.$u.toast('支付成功')
							_this.get_detail()
							uni.$emit('doFosterOrder', {
								'type': 2,
								'index': _this.temp_index
							})
						},
						fail(err) {
							_this.$u.toast('支付失败')
							console.log('fail:' + JSON.stringify(err));
						}
					});
				} else {
					uni.$u.toast(data.msg)
				}
			},
			//取消订单
			async cancel() {
				this.cancel_show = true
			},
			//取消订单
			async CancleOrder() {
				if (!this.cancel_show) {
					return
				}
				const params = {
					id: this.id
				}
				//发送请求
				const data = await _this.$post('api/ry_dd_cancel', params)
				if (data.code == 200) {
					uni.$u.toast(data.msg)
					_this.get_detail()
					uni.$emit('doFosterOrder', {
						'type': 1,
						'index': _this.temp_index
					})
					setTimeout(() => {
						this.cancel_show = false
					}, 2000)
				} else {
					uni.$u.toast(data.msg)
				}
			},
		},
		onLoad(e) {
			_this = this;
			if (e.id) {
				_this.id = e.id
			}
			if (e.index) {
				_this.temp_index = e.index
			}
			_this.get_detail()
		},
		onShow() {

		},
		components: {}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/order.scss";

	.container {
		.top {
			background: #fff;
			border-radius: 20rpx;
			padding: 0 30rpx;

			.title {
				@include flex-box(row, space-between, flex-start);
				border-bottom: $global-border;
				padding: 20rpx 0;

				.left {
					.status {
						color: $color-FCBE38;
						font-size: 30rpx;
						font-weight: 500;
					}

					.date {
						color: $color-919191;
						margin-top: 20rpx;
					}
				}

				.right {
					@include flex-box(row, null, center);

					image {
						width: 40rpx;
						margin-right: 10rpx;
					}

					text {
						color: $theme-F94A36;
						font-size: 24rpx;
					}
				}
			}

			.good {
				@include flex-box();
				padding: 30rpx 0;

				.goods-img {
					width: 100rpx;
					height: 100rpx;
					margin-right: 20rpx;
					border-radius: 10rpx;
				}

				.right {
					@include flex-box(row, space-between, center);
					flex: 1;

					.left {
						.name {
							font-size: 28rpx;
							font-weight: 500;
						}

						.desc {
							margin-top: 10rpx;
							font-size: 28rpx;
							color: $color-919191;
						}
					}
				}

				.right-num {
					color: $color-919191;
					font-size: 30rpx;
				}
			}
		}

		.order {
			@include flex-box(row, space-between, center);
			padding: 30rpx 0;

			.left {
				color: $color-919191;
				font-size: 28rpx;
				font-weight: 500;
			}

			.right-btn {
				width: 140rpx;
				height: 50rpx;
				line-height: 46rpx;
				padding: 0;
				border-radius: 30rpx;
				border: 2rpx solid $color-BCBCBC;
				background: none;
			}
		}

		.zhouqi {
			background: #fff;
			border-radius: 20rpx;
			padding: 0 30rpx;

			.title {
				height: 86rpx;
				@include flex-box(row, space-between, center);
				border-bottom: $global-border;

				.left {
					color: $color-919191;
					font-size: 28rpx;
					font-weight: 500;
				}

				.right {
					color: $color-919191;

					.day {
						font-size: 34rpx;
						font-weight: 500;
						color: $color-080524;
					}
				}
			}

			.zhouqi-items-container {
				.zhouqi-items {
					@include flex-box();
					// padding: 30rpx 0 0;
					flex-wrap: wrap;

					&:not(:last-child) {
						border-bottom: $global-border;
					}

					.zhouqi-item {
						text-align: center;
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 10rpx 0;

						&:nth-child(2) {
							flex: 1;
						}

						.tit {
							color: $color-919191;
							font-size: 28rpx;
							font-weight: 500;
						}

						.desc {
							color: $color-FCBE38;
							font-size: 32rpx;
							font-weight: 500;
							// margin-top: 20rpx;
						}
					}
				}
			}
		}
	}
</style>